import { getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue'
import backBtn from '../../common/backBtn/backBtn.vue'
import order from '../../common/order/order.vue'
import { onLoad } from '@dcloudio/uni-app';
import { foodTakeoutTableRule, moduleTypeRule, objectAny } from '../../options/base';
import { baseGetOrderList } from '../../utils/doCloud';
import { toggleModule } from '../../utils/toggleModule';

type queryFromDataRule = {
	end : string;
	start : string;
	module : moduleTypeRule
}
export default {
	components: {
		backBtn,
		order
	},
	setup() {
		// 查询条件需要的参数
		const queryFromData = ref<queryFromDataRule>({
			end: ``,
			start: ``,
			module: `foodTakeout`
		});
		// 筛选框下拉层
		const myFilterDropdownRef = ref<any>(null);
		const activeIndex = ref(0);
		const swiperHeight = ref('0');
		// 搜索订单号
		const orderCode = ref(``);
		const scrollViewLeft = ref(0);
		const triggered = ref(false);
		const _freshing = ref(true);
		const tabMenus = ref([{
			name: `全部`,
			type: ``,
		}, {
			name: `已完成`,
			type: 4,
		}, {
			name: `已取消`,
			type: 6,
		}, {
			name: `待付款`,
			type: 8,
		}, {
			name: `待收货`,
			type: 3,
		}, {
			name: `退款/售后`,
			type: 9,
		}])

		const renderDataList = ref<Array<{
			list : Array<objectAny>
			pageSize : number;
			newCount : number;
			status : 'more' | 'loading' | 'noMore'
		}>>([{
			list: [],
			newCount: 0,
			pageSize: 10,
			status: 'loading'
		}, {
			list: [],
			newCount: 0,
			pageSize: 10,
			status: 'loading'
		}, {
			list: [],
			newCount: 0,
			pageSize: 10,
			status: 'loading'
		}, {
			list: [],
			newCount: 0,
			pageSize: 10,
			status: 'loading'
		}, {
			list: [],
			newCount: 0,
			pageSize: 10,
			status: 'loading'
		}, {
			list: [],
			newCount: 0,
			pageSize: 10,
			status: 'loading'
		}])

		let deviceWidth = 0;

		onLoad((options) => {
			if (options.t != null) {
				activeIndex.value = (+options.t);
			}
			const { windowHeight, windowWidth } = uni.getSystemInfoSync();
			swiperHeight.value = (windowHeight as number) - uni.upx2px(210) + 'px'
			deviceWidth = (windowWidth as number);

		})
		watch(activeIndex, async (value) => {

			try {
				await nextTick();
			} catch (error) {
				console.log(error)
			}

			if (value >= 3) {
				scrollViewLeft.value = deviceWidth / 2
			} else {
				scrollViewLeft.value = 0
			}

			getOrderList();
		})

		const refresherrefresh = async () => {
			if (!_freshing.value) {
				return false
			}
			_freshing.value = false;
			console.log(`下来刷新被触发`);
			triggered.value = true;

			await getOrderList();

			triggered.value = false;
			_freshing.value = true;
		}
		const scrolltolower = async () => {
			console.log(`已经滚动到底部`)
			const index = activeIndex.value;
			const current = renderDataList.value[index];
			const oldCount = current.list.length;
			current.pageSize += 10;
			if (current.status == 'loading') {
				return false
			}
			const newCount = await getOrderList();
			if (newCount === oldCount) {
				current.pageSize -= 10;
			}
		}

		const swiperChange = (e : any) => {
			toggleTab(e.detail.current);
		}

		const toggleTab = (index : number) => {
			activeIndex.value = index;
		}
		/**
		 * 获取当前页面中选中的顶部tabbar项
		 */
		function getCurrentTab() {
			const index = activeIndex.value;
			const item = tabMenus.value[index];
			const current = renderDataList.value[index];
			return {
				current,
				tabMenu: item
			}
		}
		/**
		 * 根据添加查询订单的列表数据
		 * @param {boolean} prompt - 是否显示加载提示层 
		 * @returns 
		 */
		async function getOrderList(prompt : boolean | undefined = false) {
			if (prompt) {
				uni.showLoading({ title: `正在加载` })
			}
			// 获取当前被选中的tabbar菜单信息
			const { current, tabMenu } = getCurrentTab()
			current.status = 'loading';

			const oldCount = current.list.length;
			// 获取到需要查询的模块信息
			const { module, start, end } = queryFromData.value;
			// 得到配置文件中的模块数据
			const moduleData = toggleModule[module]
			// 开始获取订单列表数据
			const listObject = await moduleData.getOrderList({
				pageSize: current.pageSize,
				status: tabMenu.type,
				module,
				startTime: start,
				endTime: end,
				orderId: orderCode.value
			})

			console.log(listObject)

			current.list = Object.values(listObject) as Array<objectAny>;
			current.newCount = current.list.length;
			let status : `more` | `noMore` = `noMore`;
			if (current.newCount !== oldCount) {
				status = `more`
			}
			current.status = status;

			if (prompt) {
				uni.hideLoading();
			}

			return current.newCount
		}

		function doFilterDropdownBox() {
			myFilterDropdownRef.value.auto();
		}
		/**
		 * 条件选择框触发选中事件 表示开始查询
		 * @param {object} options - 所选择的查询条件
		 * @param {boolean} options.initLoad - 是否为首次执行
		 * @param {Array<objectAny>} options.selectRealValList - 用户选中的查询条件
		 */
		function filterStatusConfirm(
			options : {
				initLoad : boolean;
				selectRealValList : Array<objectAny>
			}
		) {
			const queryData = options.selectRealValList.reduce((t, v) => {
				return {
					...t,
					...v
				}
			}, {})
			// 获取到自定义的查询条件 
			queryFromData.value = queryData as queryFromDataRule;
			// 获取当前被选中的tabbar菜单信息
			const { current, tabMenu } = getCurrentTab()
			// 新的确定查询事件被触发 我们应该重置查询页码
			current.pageSize = 10
			// 开始新的条件查询
			getOrderList(!options.initLoad);
		}

		return {
			myFilterDropdownRef,
			orderCode,
			tabMenus,
			renderDataList,
			triggered,
			activeIndex,
			swiperHeight,
			scrollViewLeft,
			toggleTab,
			refresherrefresh,
			scrolltolower,
			swiperChange,
			getOrderList,
			doFilterDropdownBox,
			filterStatusConfirm
		}
	}
}